<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rem转px</title>
</head>

<body>
    <div>
        <h1>两个单位写一样会卡死,首字母一样也会卡死，待修复，没时间</h1>
		<h2>标准：1px = 0.0125 rem &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 1rem = 80 px</h2>
        <h3>1<span id="show1">rem</span>=<input type="大小" value="80" style="width: 50px;" id="big"><span id="show2">px</span></h3>
        <h3><input type="text" placeholder="转之前单位" id="unit1" value="rem" style="width:50px;"> 转<input style="width:50px;" type="转之后单位" value="px" id="unit2"></h3>

    </div>
    <div style="display: flex; align-items: center; ">
        <h3 style="margin-right:10px;">转换之前</h3>
        <div style="margin-right:50px;">
            <textarea placeholder="请输入css" name="" id="a" cols="30" rows="10" style="height: 600px; width: 500px;"></textarea>
        </div>

        <h3 style="margin-right:10px;">转换之后</h3>
        <div>
            <textarea name="" id="b" cols="30" rows="10" style="height: 600px; width: 500px;"></textarea>
        </div>
    </div>
    <script>
        // 两个单位写一样会卡死
        document.getElementById('a').addEventListener('input', zhuanhuan)
        document.getElementById('big').addEventListener('input', zhuanhuan)
        document.getElementById('unit1').addEventListener('input', zhuanhuan)
        document.getElementById('unit2').addEventListener('input', zhuanhuan)

        function zhuanhuan() {
            var css = document.getElementById('a').value;
            var bInput = document.getElementById('b')

            const _1rem = Number(document.getElementById('big').value)
            const unit1 = document.getElementById('unit1').value;
            const unit2 = document.getElementById('unit2').value;

            document.getElementById('show1').innerHTML = unit1;
            document.getElementById('show2').innerHTML = unit2;

            var isEnd = false
            var reg = new RegExp(`[(\.|{0-9})]+${unit1}`)
            var reg2 = new RegExp(`${unit1}`,'g')
            while (!isEnd) {
                var match = css.match(reg);
                // css = css.replace(reg, 'rpx');
                if (!css.match(reg)) {
                    isEnd = true;
                    console.log('css')
                    bInput.value = css;
                } else {
                    var text = match[0];
                    var texts = text.split(' ').filter(item => item != ' ');
                    
                    var newText = [];
                    texts.forEach(t => {
                        t = t.replace(reg2, '')
                        if (t[0] == '.') {
                            t = '0' + t;
                        }

                        console.log('t',t)
                        t = Number(t);
                        t = accMul(t, _1rem);



                        newText.push(t + unit2)
                        console.log('newText',newText)
                        return t + unit2
                    });

                    var newCss = newText.join(' ')



                    css = css.replace(reg, newText);




                }
            }



        }


        /**
 * 加法函数，用来得到精确的加法结果
 * @param {Object} arg1
 * @param {Object} arg2
 */
        function accAdd(arg1, arg2) {
            var r1 = deal(arg1);
            var r2 = deal(arg2);
            var m = Math.pow(10, Math.max(r1, r2))
            return (arg1 * m + arg2 * m) / m
        }

        /**
         * 乘法函数，用来得到精确的乘法结果
         * @param {Object} arg1
         * @param {Object} arg2
         */
        function accMul(arg1, arg2) {
            var m = 0;
            m += deal(arg1);
            m += deal(arg2);
            var r1 = Number(arg1.toString().replace(".", ""));
            var r2 = Number(arg2.toString().replace(".", ""));
            return (r1 * r2) / Math.pow(10, m)
        }

        /**
         * 除法函数，用来得到精确的除法结果
         * @param {Object} arg1
         * @param {Object} arg2
         */
        function accDiv(arg1, arg2) {
            var t1 = deal(arg1);
            var t2 = deal(arg2);
            var r1 = Number(arg1.toString().replace(".", ""))
            var r2 = Number(arg2.toString().replace(".", ""))
            return (r1 / r2) * Math.pow(10, t2 - t1);
        }
        /**
         * 求小数点后的数据长度
         */
        function deal(arg) {
            var t = 0;
            try {
                t = arg.toString().split(".")[1].length
            } catch (e) { }
            return t;
        }
    </script>
</body>

</html>